<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
 <html lang="en">
<head>
<meta charset="UTF-8">
<title>帐号注册</title>
<link href="resources/css/register.css" type="text/css" rel="stylesheet" />
<link href="resources/css/style.css" rel="stylesheet" type="text/css" />
<script src="resources/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="resources/js/jquery.validate.js" type="text/javascript"></script>
<style type="text/css">
.errorCla{
	display: inline-block;
	margin-bottom: 20px;
}
.errorForm{
	display: inline-block;
	white-space: nowrap;
	margin-top:10px;
	margin-left:50px;
	position: absolute;
	color:red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	jQuery.validator.addMethod("userPatt", function(value, element) {
		var tel = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
		 return this.optional(element) || tel.test(value);
	}, "<em></em>只能输入数字、字母、中文和下划线");
	jQuery.validator.addMethod("pwPatt", function(value, element) {
		var tel = /^[a-zA-Z0-9]\w+$/;
		return this.optional(element) || tel.test(value);
	}, "<em></em>只能输入数字、字符和下划线");
	jQuery.validator.addMethod("ch_ABCPatt", function(value, element) {
		var tel = /^[a-zA-Z\u4e00-\u9fa5]+$/;
		return this.optional(element) || tel.test(value);
	}, "<em></em>只能输入中文或字母");
	$("form").validate({
		onkeyup: false,
		rules: {
		    userName:{required:true,minlength:2,userPatt:true,
				remote: {url: "/check_userName",type: "post",
					data: {userName: function() {return $( "#userName" ).val();}},
					complete:function() {
						if( $("#delError").next().find("label").css("display")=="block"){
							$("#delError").attr("class","icon icon-error");
						}else{$("#delError").attr("class","icon icon-correct");}
						$("#delError").show();
				}}
			},
		    password:{required:true,minlength:6,pwPatt:true},
		    rePassword:{required:true,equalTo:"#password"},
		    email:{required:true,email: true},
		},
		messages :{
			userName:{required :"<em></em>请输入用户名",minlength:"<em></em>密码不能小于2个字符",remote:"<em></em>该帐号已经被注册，换个更好的吧"},
			password:{required :"<em></em>密码不能为空",minlength:"<em></em>密码不能小于6个字符"},
			rePassword:{required :"<em></em>重复密码不能为空",equalTo: "<em></em>两次输入密码不一致"},
			email:{required :"<em></em>邮箱不能为空",email: "<em></em>请输入正确的email地址"},
		},
		errorPlacement: function(error, element) {
			element.next().show();
			element.next().attr("class","icon icon-error");
			error.appendTo( element.next().next());
		},
	});
	
	/*--------输入框为空的情况下，点击输入框触发事件字颜色变淡,输入和退出颜色恢复---------*/
	$("input").focus(function(){//点击输入框颜色变淡
		if($(this).val()==""){$(this).css("color","rgb(192, 192, 192)");}
	});
	$("input.text").blur(function(){
		$(this).css("color","#333333");//光标退出输入框颜色恢复
		/*--------验证通过 显示对号---------*/
		if($(this).valid()){
			if($(this).val()!=""){
				$(this).next().show();
				$(this).next().attr("class","icon icon-correct");
			}else{$(this).next().hide();}
		}else{  /* 验证失败 显示感叹号 */
			$(this).next().show();
			$(this).next().attr("class","icon icon-error");	
		}
	});
	$("input").keydown(function(){//输入时颜色恢复
		$(this).css("color","#333333");
	});
	/*---------------我同意后'注册按钮'才能触发--------------*/
	$("#agree").click(function(){
		if(this.checked == true){
			$("#btn_submit").attr("disabled",false);
		}else{
			$("#btn_submit").attr("disabled",true);
		}
	});
}); 
</script>
</head>
<body>
<div id="topPan"><a href="index"><img src="resources/images/10285a.png" title="Zu Ji Wang" alt="Zu Ji Wang" width="204" height="57" border="0"/></a>
	<ul>
		<li style="margin-left:600px;"><a href="login">登陆</a></li>
	</ul>
</div>
<!-- <header class="header">
    <div class="logo"><a href="/"><img src="resources/images/10285a.jpg" class="logo"></a></div>
    <div class="quick-link">
        <ul>
            <li><a href="/login">帐号登录</a></li>
            <li class="separator">&nbsp;&nbsp;|&nbsp;&nbsp;</li>
        </ul>
    </div>
</header> -->
<div class="container" style="height:480px;">
    <ul class="tabs" id="tabs">
        <li class="on"><span class="title">个人注册</span></li>
    </ul>
    <div class="content">
        <div id="personal">
        	<form:form commandName="registeForm" action="register" id="regform" autocomplete="off">
                <section class="section-form">
                    <div class="form-item form-item-group">
                        <label style=" border-top:0;">
                        	<form:input path="userName" placeholder="用户名" id="userName" class="text" minLength="2" maxlength="12" />
                        	<form:errors path="userName" class="errorForm"/>
                        <span style="display:none" class="icon icon-correct" id="delError"></span><span class="errorCla"></span></label>
                        <label >
                        	<form:input path="password" placeholder="密码" id="password" class="text" onpaste="return false;" maxlength="20" onfocus="this.type='password'"/>
                        	<form:errors path="password" class="errorForm"/>
                        <span style="display:none" class="icon icon-correct"></span><span class="errorCla"></span></label>
                        <label>
                        	<form:input path="rePassword" placeholder="确认密码" id="rePassword" class="text" maxlength="20" onpaste="return false;" onfocus="this.type='password'"/>
                        	<form:errors path="rePassword" class="errorForm"/>
                        <span style="display:none" class="icon icon-correct"></span><span class="errorCla"></span></label>
                    </div>
                    <div class="form-item" id="row-email">
                        <label>
                        	<form:input path="email" placeholder="邮箱" class="text" maxlength="30" id="email"/>
                        	<form:errors path="email" class="errorForm"/>
                        <span style="display:none" class="icon icon-correct"></span><span class="errorCla"></span></label>
                    </div>
                    <div>
                        <label><input tabindex="9" id="agree" name="agree" type="checkbox" checked>我已阅读并同意<a href="register" target="_blank">zuji.com</a>的服务条款《用户服务条款》</label>
                    </div>
                    <div>
                        <input id="btn_submit" class="btn-orange" name="btn_submit" tabindex="10" type="submit" value="马上注册">
                    </div>
                </section>
            </form:form>
        </div>
   </div>
</div>
<footer class="footer">
    <p>
        <a href="/about/about.html">关于我们</a> |
        <a href="/about/contact.html">联系我们</a> |
        <a href="/about/jobs.html">招聘信息</a> |
        <a href="/about/privacy.html">隐私保护</a> |
        <a href="/about/copyright.html">版权声明</a> 
    </p>
    <p class="copyright">Copyright &copy; 2013-2014 ZuJi. All Rights Reserved.</p>
</footer>
</body>
</html>